---
title: ערכת צבעים
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Color Scheme Card

מייצג תצורות צבע שונות ומותאם במיוחד לנושאים בהירים וכהים.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| תכונות          | סוג                                     | תיאור                                                                                 | ברירת מחדל |
| --------------- | --------------------------------------- | ------------------------------------------------------------------------------------- | ---------- |
| גרסה            | string                                  | הווריאנט של תצורת הצבע. Options include `Dark`, `Light`, and `System` | בהיר       |
| selected        | בוליאני                                 | אם `true`, מציג סימן ביקורת כדי לציין את תצורת הצבע שנבחרה                            |            |
| מאפיינים נוספים | `React.ComponentPropsWithoutRef<'div'>` | Standard HTML `div` element props                                                     |            |

</Tab>

</Tabs>

## בורר תצורת צבע

מאפשר למשתמשים לבחור בין תצורות צבע שונות.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| תכונות   | סוג          | תיאור                                             |
| -------- | ------------ | ------------------------------------------------- |
| ערך      | `ערכת צבעים` | תצורת הצבע שנבחרה כרגע                            |
| onChange | פונקציה      | הפונקציה שברצונך להפעיל כאשר משתמש בוחר תצורת צבע |

</Tab>

</Tabs>
